<template>
	<uv-popup ref="popup" mode="right" safeAreaInsetTop bgColor="rgba(255, 255, 255, 0.7)">
		<view class="channel-pop-layout">
			<image class="channel-item" :src="`/static/home/side_logo_${item.code}@2x.png`" mode="scaleToFill" v-for="item in dataList" :key="item.type" @tap="didSelectItem(item)"></image>
		</view>
	</uv-popup>
</template>

<script setup>
	import { ref } from 'vue'
	import { useChannelStore } from '@/common/stores'
	import { getSystemParams,changeChannelType } from '@/common/api/api.js'
	const channelStore = useChannelStore()
	const popup = ref(null)
	const dataList = ref([])
	const emits = defineEmits(['success'])
	//打开
	const open = ()=>{
		popup.value.open()
		getChannelList()
	}
	const close = ()=>{
		popup.value.close()
	}
	const didSelectItem = async (item)=>{
		if(item.code == channelStore.channelType){
			close()
			return
		}
		await changeChannelType({paymentChannel:item.code})
		channelStore.updateChannelType(item.code)
		emits('success')
		close()
	}
	/**
	 * 获取机构渠道列表
	 */
	const getChannelList = async ()=>{
		const res = await getSystemParams({categoryCode:'PaymentChannel'})
		dataList.value = res.result
	}
	defineExpose({
		open,
		close
	})
</script>

<style lang="scss" scoped>
	.channel-pop-layout {
		width: 360rpx;
		display: flex;
		flex-direction: column;
		align-items: center;
		padding-top: 20rpx;
		.channel-item{
			width: 320rpx;
			height: 320rpx;
			margin-bottom: 20rpx;
			border-radius: 20rpx;
		}
	}
</style>